<template>
	<view >
		
		<view class="tui-top">
			<tui-steps :items="stepItems" :type="1" spacing="180rpx" :activeSteps="activeSteps" backgroundColor="#fafafa"></tui-steps>
		</view>
		
		<view v-if="activeSteps == 0">
			<view class="info">标题的作用是能够概括文章的主要内容，而且标题可以作为全文的线索，揭示文章的中心主旨，同时，标题也可以交代故事的背景，好的标题可以做到一语双关，设置悬念，引发读者的兴趣，发人深省</view>
			
			<tui-list-cell style="margin-top: 30rpx;margin-left: 20rpx;" :hover="false">
				<view class="tui-input-item">
					<view class="tui-input-title">话题标题</view>
					<input v-model="title" class="tui-input" placeholder="请输入..." placeholder-class="tui-phcolor" auto-focus='activeSteps == 0'/>
				</view>
			</tui-list-cell>

		</view>
		
		<view v-if="activeSteps == 1">
			<view class="info">请根据您要发布的话题内容选择正确的分类,如果您一旦发布完成,将不能更改分类了~</view>
			
			<tui-cascade-selection
				height="280px"
				activeColor="#EB0909"
				lineColor="#EB0909"
				checkMarkColor="#EB0909"
				:itemList="itemList"
				request
				:receiveData=receiveData
				@complete="complete"
				@change="selectionChangeHandle"
			></tui-cascade-selection>
		
		</view>
		
		<view v-if="activeSteps == 2">
			<view class="info">转载:如果你设置为可转载,则别人可以将你创作的内容随意复制,如果你的内容不是原创,则应该设置为可转载!!!</view>
			
			<view class="tui-title tui-ptop20">

				是否可以转载(当前:   {{copyright == 1 ?'可转载':'不可转载'}})
				<switch class="tui-switch" @change="switchChangeHandle" color="#5677fc"></switch>
			</view>
		</view>
		
		<view v-if="activeSteps == 3">
			<view class="info">话题内容是整个过程的核心,如果说,话题标题是马娘的神笔,那么话题内容就是马娘了,再厉害的武器,没有人使用都是废的!!</view>
			<jinEdit
				ref="jinEdit"
				:html="html" 
				@editOk="editOk" 
				:uploadFileUrl="'http://huchenglong.top:8080/renren-fast/app/upload'">
			</jinEdit>
		</view>
<!-- 		
		<tui-divider width="100%" :gradual="true" :gradualColor="gradualColor">请选择分类</tui-divider>
		<view style="margin-top: 30rpx;margin-left: 30rpx;">
			<radio-group @change="topicCategoryClick">

				<radio class="tui-flex-4" v-for="(item,index) in topicCategoryList" :key="index"
					style="justify-content: center;width: 33%;font-size: 25rpx;" 
					 :value="item.id">{{item.name}}
				</radio>

			</radio-group>
		</view>
		
		<tui-divider width="100%" :gradual="true" :gradualColor="gradualColor">
			是否可以转载
		</tui-divider>
		
		<radio-group style="margin-left: 30rpx;font-size: 25rpx;" @change="copyrightClick">
		
			<radio value="1" class="tui-flex-1" style="width: 50%;">
				可转载
			</radio>
			<radio value="0" class="tui-flex-1" style="width: 50%;">
				不可转载
			</radio>
					
		
		</radio-group>
		
		<tui-divider width="100%" :gradual="true" :gradualColor="gradualColor">话题内容</tui-divider>
		 -->


		
		<view class="tui-btn-box btn tui-flex-box">
			<view class="tui-flex" style="width: 90%;flex-wrap: nowrap;display: flex;">
				<view class="pre_btn tui-flex-1">
					<tui-button width="280rpx" height="90rpx" type="small" v-show="activeSteps> 0" @click="stepPreChange" shape="circle">上一步</tui-button>
				</view>
				
				<view class="next_btn tui-flex-1" style="justify-content: flex-end;">
					<tui-button width="280rpx" height="90rpx"  @click="stepNextChange" shape="circle">{{activeSteps == 3 ? '发布':'下一步'}}</tui-button>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	import jinEdit from '@/components/jin-edit/jin-edit.vue';
	import communityApi from '@/request/api/communityApi.js'

	export default {
		data() {
			return {
				stepItems: [{
					title: "步骤一",
					desc: "请输入标题"
				}, {
					title: "步骤二",
					desc: "请选择分类"
				}, {
					title: "步骤三",
					desc: "请选择"
				}, {
					title: "步骤四",
					desc: "请输入内容"
				}],
				activeSteps: 0,
				//渐变线条
				gradualColor: ['red', '#4a67d6'],
				html: '',
				communityCategoryId:'',
				communityId:'',
				topicCategoryId:'',
				topicCategoryList:[],
				title:'',
				copyright:'',
				dataForm:{},
				loginUser:uni.getStorageSync("user"),
				itemList:[],
				receiveData:[],
			}
		},
		onLoad(param){
			this.communityCategoryId = param.communityCategoryId
			this.communityId = param.communityId

			this.init();
		},
		methods: {
			init(){
				communityApi.getTopicCategoryByCommunityId(this.communityId).then(response=>{
					this.topicCategoryList = response.data
				})
				
				communityApi.getCommunityCategoryForOption().then(response=>{
					this.itemList = response.data
				})
				
				
			},
			stepNextChange(){
				
				if(this.activeSteps == 3){
					this.$refs.jinEdit.release(true)
				}else{
					this.activeSteps ++;
				}	
			},
			stepPreChange(){
				this.activeSteps --;
			},
			selectionChangeHandle(e){
				if(e.layer == 0){
					this.communityCategoryId = e.value
					communityApi.getCommunityForOptionById(e.value).then(response =>{

						this.receiveData = response.data;
					})
				}else if(e.layer == 1){
					this.communityId = e.value
					communityApi.getTopicCategoryForOptionById(e.value).then(response =>{
						
						this.receiveData = response.data;
					})
				}else if(e.layer == 2){
					this.topicCategoryId = e.value
				}
				
			},
			switchChangeHandle(e){

				if(e.detail.value){
					this.copyright = 1
				}else{
					this.copyright = 0
				}
			},
			//用户点击发布后，会触发该方法
			editOk(res) {
				//但用户点击提交时,先询问是否确定发布
				let _this = this;
				uni.showModal({
					title: '提示',
					content: '是否发布',
					success: function (modalRes) {

						if(modalRes.confirm){
	
							_this.html = res.html ,
							_this.sumbit();
						}
					}
				});
			},
			topicCategoryClick(event){
				this.topicCategoryId = event.detail.value;
				console.log(this.topicCategoryId)
			},
			copyrightClick(event){
				this.copyright = event.detail.value;

			},
			sumbit(){

				this.dataForm.communityCategoryId = this.communityCategoryId
				this.dataForm.communityId = this.communityId
				this.dataForm.topicCategoryId = this.topicCategoryId
				this.dataForm.title = this.title
				this.dataForm.copyright = this.copyright
				console.log(this.html)
				this.dataForm.content = this.html.replace("\\","/")
				this.dataForm.memberId = this.loginUser.id
				communityApi.saveTopic(this.dataForm).then(response=>{
					if(response.code == 0){
						 uni.showToast({
						         title:"提交成功,请等待审核",
						         duration:1000
						     });
						     setTimeout(function() {
						         uni.navigateBack()
						     }, 1000);
						
					}
				})
			}
		},
		components: {
			jinEdit
		},
	}
</script>

<style>
	@import '../../static/style/thorui.css';
	.tui-top {
		margin-top: 40rpx;
	}
	.topic_title_text{
		color: #008000;
		margin-top: 50rpx;
		margin-left: 50rpx;
	}

	.btn{
		width: 100%;
		margin-left: 35rpx;
		margin-top: 50rpx;
		display: flex;
		flex-wrap: nowrap;
	}
	.next_btn{
		width: 50%;
		margin-left: auto;
		display: flex;
		align-items: center;
	}
	
	.pre_btn{
		width: 50%;
	}
	.info{
		font-size: 20rpx;
		margin-top: 50rpx;
		margin-left: 40rpx;
		width: 90%;
		color: #A3A3A3;
	}
	.tui-title {
		width: 100%;
		padding: 80rpx 30rpx 30rpx;
		box-sizing: border-box;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.tui-ptop20 {
		padding-top: 20rpx;
	}
	
	.tui-switch {
		
		transform: scale(0.8);
		transform-origin: 100% center;
	}
</style>
